<template>
  <a-modal v-model:visible="visible" width="65vw" modal-class="html-string-box" unmount-on-close :title="title" :footer="false">
    <div class="html-string" v-dompurify-html="htmlString"></div>
  </a-modal>
</template>

<script setup lang="ts">
  import { computed } from 'vue'

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    htmlString: {
      type: String,
      default: '',
    },
  })

  const emits = defineEmits(['update:modelValue'])

  const visible = computed({
    get: () => props.modelValue,
    set: (val) => emits('update:modelValue', val),
  })
</script>

<style lang="less">
  .html-string-box {
    top: 0;
    display: inline-flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 90%;
    width: 100%;
  }
  .html-string {
    // width: 100%;
    // display: flex;
    // justify-content: center;
    ol,
    ul {
      margin: revert;
      padding: revert;
      list-style: revert;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: revert;
      padding: revert;
      font-size: revert;
      font-weight: revert;
    }

    p {
      margin: revert;
      padding: revert;
      font-size: revert;
      font-weight: revert;
    }
    .mceNonEditable {
      font-size: 16px;
      color: #165dff;
      font-style: normal;
    }
  }
</style>
